<template>
	<v-content ref="content">
		<scroll-view scroll-x class="tab" scroll-into-view="">
			<div id="" class="item-tab" :class="[{ active: query.current == 0 }]" @click="onTabChange(0)">进行中</div>
			<div id="" class="item-tab" :class="[{ active: query.current == 1 }]" @click="onTabChange(1)">已完成</div>
		</scroll-view>
		<div class="list">
			<div class="item" v-for="item in list" :key="item.id" @click="toPage('/pages/learn/details?id=' + item.id)">
				<image class="image" :src="item.coverImg" mode="aspectFill"></image>
				<div class="text">
					<div class="title">{{ item.courseName }}</div>
					<div class="progress-line">
						<div class="progress-bar">
							<div
								class="progress-bar-inner"
								:style="[
									{ width: (item.finishCoursewares / item.totalCoursewares).toFixed(2) * 100 + '%' },
								]"
							></div>
						</div>
						<div class="icon" :class="{ success: item.finishCoursewares == item.totalCoursewares }"></div>
					</div>
					<div class="message">
						学习进度
						<span class="tip">{{ item.finishCoursewares }} / {{ item.totalCoursewares }}</span>
						<!-- <div class="date">截止2020-10-10</div> -->
					</div>
				</div>
			</div>
		</div>
		<v-empty :list="list"></v-empty>
	</v-content>
</template>
<script>
import mixins from "@/mixins"
export default {
	mixins: [mixins],
	data() {
		return {
			list: [],
		}
	},
	methods: {
		onshow() {
			this.list = []
			this.getList()
		},
		onTabChange(type) {
			this.query.current = type

			this.onshow()
		},
		async getList() {
			let url = ""
			switch (+this.query.current) {
				case 0:
					url = "/api/study/course/studyCourse/schedulelist"
					break
				case 1:
					url = "/api/study/course/studyCourse/finishlist"
					break
				default:
					break
			}
			const data = await this.$axios.get(url)
			this.list = data
		},
	},
}
</script>
<style lang="scss" scoped>
.tab {
	overflow-x: auto;
	white-space: nowrap;
	line-height: 70rpx;
	margin: auto;
	margin-bottom: 30rpx;
	width: 690rpx;
	font-size: 32rpx;
	.item-tab {
		display: inline-block;
		transition: all 0.2s;
		font-size: 26rpx;
		position: relative;
		padding: 4rpx 25rpx;
		&::before {
			content: "";
			position: absolute;
			bottom: 7rpx;
			left: 0;
			right: 0;
			width: 40%;
			margin: auto;
			height: 7rpx;
			background: $primary;
			opacity: 0;
			transition: opacity 0.1s;
			margin-top: 5px;
		}
		&.active {
			transform: scale(1.2);
			&::before {
				opacity: 1;
			}
		}
	}
}
.list {
	padding: 27px 18px 0;
	.item {
		margin-bottom: 30rpx;
		display: flex;
		justify-content: start;
		align-items: center;
		image {
			width: 270rpx;
			height: 194rpx;
			border-radius: 10rpx;
		}
		.text {
			padding-left: 20rpx;
			flex: 1;
			.title {
				// 单行溢出省略
				width: 90%;
				text-overflow: ellipsis; //...
				display: -webkit-box;
				overflow: hidden;
				-webkit-box-orient: vertical;
				line-clamp: 2;
				-webkit-line-clamp: 1; //显示几行
				margin-bottom: 26rpx;
			}
			.progress-line {
				display: flex;
				justify-content: space-between;
				align-items: center;
				.progress-bar {
					flex: 1;
					background: #e4e4e4;
					border-radius: 20px;
					height: 16rpx;
					overflow: hidden;
					.progress-bar-inner {
						background: $color;
						width: 0;
						height: 100%;
						transition: width 0.15s;
						border-radius: inherit;
					}
				}
				.icon {
					flex: none;
					width: 20rpx;
					height: 20rpx;
					margin-left: 15rpx;
					color: #e4e4e4;
					position: relative;
					border: 1px solid currentColor;
					border-radius: 50%;
					&::before {
						content: "";
						position: absolute;
						top: -3rpx;
						bottom: 0;
						right: 0;
						left: 0;
						margin: auto;
						width: 10rpx;
						height: 5rpx;
						transform: rotate(-45deg);
						border-bottom: 1px solid currentColor;
						border-left: 1px solid currentColor;
					}
					&.success {
						color: $uni-color-warning;
					}
				}
			}
			.message {
				height: 74rpx;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				color: #808080;
				font-size: 24rpx;
				.tip {
					color: $color;
					margin-left: 5rpx;
				}
				.date {
					margin-left: auto;
				}
			}
		}
	}
}
</style>
